<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-03-25 22:52:21
 * @LastEditTime: 2024-03-28 21:33:55
-->
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { Plus, Delete, Download, Upload } from "@element-plus/icons-vue";
import { ISearchData, ITableData } from "@/axios/setting/icon/types.d";
import ElFormQuote from "@/components/quote/el-form-quote.vue";
import ElDialogFromQuote from "@/components/quote/el-dialog-form-quote.vue";
import ElTableQuote from "@/components/quote/el-table-quote.vue";
import ElDialogDetailsQuote from "@/components/quote/el-dialog-details-quote.vue";
import { IResultPage } from "@/types/index.d";
import { queryApi } from "@/axios/setting/icon/index";
import DictDataItem from "./dict-data-item.vue";

//搜索条件
const searchData = reactive<ISearchData>({
  name: "",
  type: [],
});
//分页返回参数
const pageData = ref<IResultPage<ITableData>>({
  records: [],
});
//form表单
const formData = reactive<any>({
  name: "",
  code: "",
  type: [],
});
const detailsData = reactive({});
const tableData = reactive([{ id: 1, name: "测试", code: "#icon-taiyang" }]);
//弹窗开关
const dialogVisible = ref<boolean>(false);
const detailsVisible = ref<boolean>(false);
/**
 * 搜索方法
 * @param search
 */
const searchSubmit = async (search: ISearchData) => {
  const result = await queryApi(search);
  pageData.value = Object.freeze(result.data);
};
/**
 * 打开dialog弹窗
 */
const openDialog = (id: number | null) => {
  dialogVisible.value = true;
  if (id) {
    //编辑
    console.log("====");
  }
  //新增
};
const handleClose = () => {
  dialogVisible.value = false;
};
const submitChange = (_data: any) => {};

/**
 * 详情
 * @param id
 */
const detailsChange = (_id: number) => {
  detailsVisible.value = true;
};
const handleDetailsClose = () => {
  detailsVisible.value = false;
};

const itemRef=ref<any>();
const linkChange=(_data:any)=>{
  itemRef.value.openDialog(_data);
}



</script>
<template>
  <el-card>
    <!-- 搜索栏 -->
    <el-form-quote
      :search-data="searchData"
      @searchChange="searchSubmit"
      class="hidden-xs"
    >
      <template #default="scope">
        <el-form-item prop="name" :label="$t(`setting.icon.name`)">
          <el-input
            :placeholder="
              $t(`setting.icon.name`, { prefix: $t(`prefix.placeholder`) })
            "
            clearable
            v-model="scope.row.name"
          />
        </el-form-item>
        <!-- select -->
        <el-form-item prop="enabled" :label="$t(`table.status`)">
          <el-select-v2
            v-model="scope.row.enabled"
            :options="[]"
            multiple
            :placeholder="$t(`table.status`, { prefix: $t(`prefix.select`) })"
            style="width: 160px"
          />
        </el-form-item>
      </template>
    </el-form-quote>
    <!-- button -->
    <div class="button">
      <el-button type="primary" :icon="Plus" @click="openDialog(null)">
        {{ $t(`button.add`) }}
      </el-button>
      <el-button type="warning" :icon="Upload">
        {{ $t(`button.import`) }}
      </el-button>
      <el-button type="warning" :icon="Download">
        {{ $t(`button.export`) }}
      </el-button>
      <el-button type="danger" :icon="Delete">
        {{ $t(`button.deleteBatch`) }}
      </el-button>
    </div>
    <el-divider />
    <!-- table -->
    <el-table-quote
      :table-data="tableData"
      :editEvent="openDialog"
      :detailsEvent="detailsChange"
    >
      <el-table-column type="selection" width="55" />

      <el-table-column :label="$t(`setting.dict.name`)" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="linkChange(scope.row)">
            {{ scope.row.name }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column
        prop="description"
        :label="$t(`setting.dict.description`)"
        align="center"
      />
    </el-table-quote>
  </el-card>

  <!-- add/edit 弹窗 -->
  <el-dialog-form-quote
    :dialog-visible="dialogVisible"
    :form-data="formData"
    @submitChange="submitChange"
    @handleClose="handleClose"
    width="400"
  >
    <template #default="scope">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item
            prop="name"
            :label="$t(`setting.icon.name`)"
            :rules="[
              {
                required: true,
                message: 'Please input email address',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              v-model="scope.row.name"
              :placeholder="
                $t(`setting.dict.name`, { prefix: $t(`prefix.placeholder`) })
              "
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            prop="description"
            :label="$t(`setting.dict.description`)"
          >
            <el-input
              v-model="scope.row.description"
              type="textarea"
              maxlength="60"
              rows="5"
              show-word-limit
              :placeholder="$t(`setting.dict.description`)"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </el-dialog-form-quote>

  <!-- 详情 -->
  <el-dialog-details-quote
    :dialogVisible="detailsVisible"
    :details-data="detailsData"
    @handleClose="handleDetailsClose"
  >
    <template #default="scope">
      <el-descriptions-item :label="$t(`setting.dict.name`)">{{
        scope.rows.name
      }}</el-descriptions-item>
      <el-descriptions-item :label="$t(`setting.dict.description`)">{{
        scope.rows.type
      }}</el-descriptions-item>
    </template>
  </el-dialog-details-quote>

  <dict-data-item ref="itemRef"/>
</template>
<style lang="scss" scoped></style>
